<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动效果</title>
    <style>

        body {
            padding: 100px;
        }

        div {
            height: 386px;
            width: 40px;
            background: linear-gradient(skyblue, white);
            border-bottom: 10px solid yellowgreen;
            text-align: center;
        }

        .ball {
            display: inline-block;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            background: radial-gradient(white, indianred);
            animation: bounce 3s cubic-bezier(.755, .05, .855, .06);
            animation-fill-mode: forwards;
        }

        @keyframes bounce {
            60%, 80%, to {
                transform: translateY(350px);
                animation-timing-function: cubic-bezier(.215, .61, .355, 1);
            }
            70% {
                transform: translateY(250px);
            }
            90% {
                transform: translateY(300px);
            }
        }
    </style>
</head>
<body>
<div>
    <div>
        <span class="ball"></span>
    </div>
</div>
</body>
</html>
